<template>
  <div class="WarehouseDifQ">
    <div class="wdq-top">
      <div>
        <p>仓库</p>
        <el-input
          v-model="warehouseNo"
          @blur="warehouseNoBlur"
          style="width: 60px; margin-right: 10px"
        ></el-input>
        <el-select
          v-model="warehouseName"
          style="width: 100px"
          @change="
            (e) => {
              this.warehouseNo = e
            }
          "
        >
          <el-option
            v-for="item in warehouseNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>盘差序号</p>
        <el-input v-model="searchSequence" class="wd"></el-input>

        <p>单号</p>
        <el-input v-model="receiptsNumber" class="wd"></el-input>

        <p>款号</p>
        <el-input class="wd" v-model="kindsNumber"></el-input>
        <!-- <el-autocomplete
          class="wd"
          clearable
          v-model="kindsNumber"
          :fetch-suggestions="querySearch">
        </el-autocomplete> -->

        <p>日期</p>
        <el-date-picker
          unlink-panels
          v-model="timeData"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <p>品牌</p>
        <el-select v-model="brandedName" class="wd">
          <el-option
            v-for="item in brandedNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>品名</p>
        <el-select v-model="commodityName" class="wd">
          <el-option
            v-for="item in commodityNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="wdq-btn">
      <!-- div .btn_container" 是新增的结构，里面的button不是新增的 -->
      <div class="btn_container">
        <el-button @click="query" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="confirm" :disabled="Dis" icon="el-icon-circle-check"
          >确认</el-button
        >
        <el-button @click="pwd" :disabled="Dis1" icon="el-icon-edit-outline"
          >改单</el-button
        >
        <el-button
          @click="showSporder"
          :disabled="Dis1"
          icon="el-icon-document-add"
          >补单</el-button
        >
        <el-button
          @click="
            () => {
              this.print = 'block'
            }
          "
          icon="el-icon-printer"
          >列印</el-button
        >
        <el-button @click="dele" :disabled="Dis1" icon="el-icon-delete"
          >删除</el-button
        >
      </div>
      <!-- 新增的结构 -->
      <div style="margin-top: 5px; display: flex">
        <div class="tip1" style="background: #6bcc7b"></div>
        :已完成
        <div class="tip1" style="background: #ff0000"></div>
        :
        <p style="margin-right: 15px">未确认</p>
        <!-- <div class="tip" style="background:#017aff;"></div>:<p style="margin-right:15px;">调货摘要</p> -->
      </div>
    </div>

    <div class="wdq-tab">
      <div>
        <el-table
          id="tip"
          :data="tableData"
          height="69vh"
          highlight-current-row
          @row-click="rowClick"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          style="width: 100%"
        >
          <!-- 这个是新增的自定义字段 -->
          <el-table-column label="确认" width="80">
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <div
                  class="tip1"
                  :style="{
                    background: scope.row.affirm === 0 ? '#FF0000' : '#6BCC7B'
                  }"
                ></div>
                <p>
                  {{ scope.row.affirm === 0 ? '未确认' : '已完成' }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sequence" label="仓库盘点序号" width="135px">
          </el-table-column>
          <el-table-column prop="warehouseNo" label="仓库编号">
          </el-table-column>
          <el-table-column
            prop="warehouseName"
            show-overflow-tooltip
            label="仓库"
          >
          </el-table-column>
          <el-table-column prop="number" show-overflow-tooltip label="盘差数量">
          </el-table-column>
          <el-table-column
            prop="money"
            width="150px"
            show-overflow-tooltip
            label="盘差金额"
          >
          </el-table-column>
        </el-table>
        <!-- 分頁 -->
        <!-- :pager-count="5"  设置显示最大页码数 超过用 … 显示 -->
        <el-pagination
          small
          background
          :pager-count="Count"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>

      <div>
        <el-table
          id="tip1"
          height="69vh"
          highlight-current-row
          @row-click="RClick"
          :data="tableData1"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          style="width: 100%"
        >
          <el-table-column
            prop="sequence"
            label="仓库盘差序号"
            show-overflow-tooltip
            width="135px"
          >
          </el-table-column>
          <el-table-column
            prop="receiptsNumber"
            show-overflow-tooltip
            label="单号"
          >
          </el-table-column>
          <el-table-column prop="warehouseNo" label="仓库编号">
          </el-table-column>
          <el-table-column
            prop="warehouseName"
            show-overflow-tooltip
            label="仓库"
          >
          </el-table-column>
          <el-table-column prop="kindsNumber" label="款号" width="142px">
          </el-table-column>
          <el-table-column prop="sellingPrice" label="售价"> </el-table-column>
          <el-table-column prop="onePrice" label="单价"> </el-table-column>
          <el-table-column
            prop="differNumber"
            show-overflow-tooltip
            label="盘差数量"
          >
          </el-table-column>
          <el-table-column
            prop="differMoney"
            show-overflow-tooltip
            width="150px"
            label="盘差金额"
          >
          </el-table-column>
          <el-table-column prop="differTime" label="盘差日期" width="100px">
          </el-table-column>
          <el-table-column prop="curency" label="币种"> </el-table-column>
          <el-table-column prop="operator" label="操作员"> </el-table-column>
          <el-table-column prop="enteringTime" label="录入时间" width="160px">
          </el-table-column>
          <el-table-column prop="status" label="修改状态"> </el-table-column>
        </el-table>
        <!-- 分頁 -->
        <el-pagination
          small
          background
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit1"
          :page-count="pagesNum1"
          :total="dataLen1"
          @current-change="handleCurrentChange1"
          @size-change="handleSizeChange1"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 列印 -->
    <pr-int
      class="print"
      :style="{ display: print }"
      @closeprint="
        () => {
          this.print = 'none'
        }
      "
    >
    </pr-int>

    <!-- 改单密码验证 -->
    <verify-password
      :style="{ display: showpwd }"
      @closepwd="closepwd"
      @showRevision="showRevision"
    >
    </verify-password>

    <change-od
      :style="{ display: ChangeOd }"
      @closeChange="closeChange"
      @saveChange="saveChange"
      @InsufficientList="InsufficientList"
      @odChange="odChange"
      :detailInfo="this.details1"
    >
    </change-od>

    <!-- 点击补单的时候，显示的组件 -->
    <supplement-order
      :style="{ display: SpOrder }"
      @closeSporder="closeSporder"
      @saveSporder="saveSporder"
      @inpNumChange="
        () => {
          this.inpList = this.getInput()
        }
      "
      :showData="this.details1"
      :tableData1="this.tableData2"
    >
    </supplement-order>

    <foot-view class="footView">
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <el-checkbox-group v-model="selectHeaderList">
            <el-checkbox
              v-for="i in headerList"
              :label="i.value"
              :key="i.value"
              style="margin-bottom: 7px"
            ></el-checkbox>
          </el-checkbox-group>
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import verifyPassword from '../../../components/VerifyPassword'
import changeOd from './childComp/ChangeOD'
import supplementOrder from './childComp/SupplementOrder'
import prInt from '../../../components/PrInt'
import today from '../../../components/mixins/today'
import { getProductName } from '../../../network/productName'
import { getBranded } from '../../../network/branded'
import {
  getWarehouse,
  postNewbuild,
  confirmDifference
} from '../../../network/warehouse'
import { getNumber } from '../../../network/quarter'
import { getDetailed } from '../../../network/manufacturer'
import enterUp from '../../../components/mixins/enterUp'
export default {
  name: 'warehouse_difference_query',
  mixins: [today, enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    // this.timeData = [this.getLastWeek(),this.getNowTime()];
    this.inpList = this.getInput()
    // 获取仓库信息
    getWarehouse().then((res) => {
      let list = res.data.data
      list.sort((a, b) => {
        return a.no.localeCompare(b.no)
      })
      list.forEach((e) => {
        this.warehouseNoList.push({ value: e.no, label: e.name })
        if (e.isMainWarehouse) {
          this.warehouseNo = e.no
          this.warehouseName = e.name
        }
      })
    })

    //品牌
    getBranded().then((res) => {
      console.log(res)
      res.data.data.forEach((e) => {
        this.brandedNameList.push({ value: e.name, label: e.name })
      })
    })
    //品名
    getProductName().then((res) => {
      let list = res.data.data
      list.forEach((e) => {
        this.commodityNameList.push({ label: e.name, value: e.name })
      })
    })
    //型号
    getNumber(JSON.stringify([''])).then((res) => {
      console.log(res.data)
      if (res.data.code == 200) {
        res.data.data.forEach((e) => {
          this.kindsNumberList.push({
            value: e.styleNumber,
            label: e.styleNumber
          })
        })
      }
    })
  },
  data() {
    return {
      Dis: false,
      Dis1: false,
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      allData1: [],
      allData: [],
      Count: 5, //页码设置显示最大页码数 超过用 … 显示
      // 总数据条数
      dataLen1: 0,
      // 总页码
      pagesNum1: 0,
      // 分页条数
      limit1: 20,
      // 当前页码
      currentPage1: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      inpList: [],
      headerList: [],
      print: 'none',
      showpwd: 'none',
      ChangeOd: 'none',
      SpOrder: 'none', // 控制显示补单dialog的显示和隐藏
      details: [],
      details1: {},
      warehouseNo: '',
      warehouseName: '',
      warehouseNoList: [],
      sequence: '',
      searchSequence: '',
      receiptsNumber: '',
      kindsNumber: '',
      kindsNumberList: [],
      timeData: [],
      brandedName: '',
      brandedNameList: [],
      commodityName: '',
      commodityNameList: [],
      selectHeaderList: [],

      tableData: [],
      tableData1: [],
      tableData2: [],
      Insufficient: []
    }
  },
  components: {
    footView,
    verifyPassword,
    changeOd,
    supplementOrder,
    prInt
  },
  methods: {
    // 确认
    confirm() {
      if (this.sequence == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选中一条数据进行确认!'
        })
        return
      }
      // for(let y of this.allData1){
      //   if(y.affirm == 1){
      //     this.$message({
      //       type: 'info',
      //       message: '此单已确认!'
      //     });
      //     return
      //   }
      // };
      this.$confirm(
        '确认后不可对此单进行改单,删单和补单操作 是否确认？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        confirmDifference({ sequence: this.sequence }).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '确认成功!'
            })
            for (let i of this.allData1) {
              console.log(i, 'i')
              if (this.sequence == i.sequenceid) {
                i.affirm = 1
              }
            }
            // 新增，确认成功之后，调用查询按钮更新数据
            // console.log('新增，确认成功之后，调用查询按钮更新数据')
            this.query()
          } else {
            this.$message.error({
              message: '确认失败'
            })
          }
        })
      })
    },
    //左表当前页
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val
      this.query()
    },
    //选择每页多少条
    handleSizeChange(val) {
      this.limit = val
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this.query()
    },
    //右表当前页
    handleCurrentChange1(val) {
      this.currentPage1 = val
      this.tableData1 = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
    },
    handleSizeChange1(val) {
      this.limit1 = val
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
      this.tableData1 = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
      console.log(this.tab1Data)
    },

    dele() {
      console.log(this.details, 'details') // 是一个对象，包含里面要被点击那一行要删除的数据
      // 如果是没有选中要删除的数据，直接return
      if (this.details == '') {
        return
      }
      console.log()
      this.$router.push({
        path: '/warhous_delete',
        // 传递盘差序号 和一个type
        query: { type: 2, sequenceid: this.sequence }
      })
      // 跳转删除页面之后，直接在顶部显示这个小卡片
      this.$store.commit('addNav', {
        label: '仓库盘差查询删单',
        name: 'warhous_delete'
      })
    },
    querySearch(queryString, cb) {
      let kindsNumberList = this.kindsNumberList
      let results = queryString
        ? kindsNumberList.filter(this.createFilter(queryString))
        : kindsNumberList
      cb(results)
    },
    createFilter(queryString) {
      return (composition) => {
        return (
          composition.value.toLowerCase().indexOf(queryString.toLowerCase()) ==
          0
        )
      }
    },
    odChange(data) {
      postNewbuild(data).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            offset: 400,
            message: '改单保存成功'
          })
          // this.query()
        }
      })
    },
    InsufficientList(data) {
      this.Insufficient = data
    },
    //改单保存
    saveChange(data) {
      this.ChangeOd = 'none'
      console.log(data)
      postNewbuild(data).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          if (this.Insufficient != '') {
            this.$alert(`${this.Insufficient} 库存不足,其余货号改单成功`, '', {
              confirmButtonText: '确定'
            })
          } else {
            this.$message({
              type: 'success',
              offset: 400,
              message: '改单保存成功'
            })
          }

          this.query()
        }
      })
    },

    //点左表显示右表
    rowClick(e) {
      // e 就是这一行的参数row
      console.log(e, 'rowClick')
      if (e.dataList[0].affirm == 1) {
        this.Dis = true
        this.Dis1 = true
      } else {
        this.Dis = false
        this.Dis1 = false
      }
      for (let r of e.dataList) {
        r.enteringTime = r.enteringTime
      }
      this.sequence = e.sequence
      // this.tableData1 = e.dataList
      this.details = e
      this.details1 = e

      this.allData1 = e.dataList
      this.dataLen1 = this.allData1.length
      this.tableData1 = this.allData1.slice(
        (this.currentPage1 - 1) * this.limit1,
        this.currentPage1 * this.limit1
      )
    },
    //点击右表
    RClick(e) {
      // this.details = e
    },
    // 点击查询的时候，触发的函数
    query() {
      let pageData = {
        limit: this.limit,
        page: this.currentPage
      }
      this.tableData = []
      this.tableData1 = []
      let obj = {
        warehouseNo: this.warehouseNo,
        sequence: this.searchSequence,
        receiptsNumber: this.receiptsNumber,
        kindsNumber: this.kindsNumber,
        // timeData:this.timeData,
        brandedName: this.brandedName,
        commodityName: this.commodityName,
        pageData,
        startTime:
          this.timeData == null || this.timeData == ''
            ? null
            : this.timeData[0].slice(0, 10) + ' 00:00:00',
        endTime:
          this.timeData == null || this.timeData == ''
            ? null
            : this.timeData[1].slice(0, 10) + ' 23:59:59'
      }
      console.log(obj)
      getDetailed(obj).then((res) => {
        console.log(res.data, 'tableData')

        // this.allData = res.data.data
        this.dataLen = res.data.total
        this.tableData = res.data.data
        // this.tableData = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
      })
    },

    //仓库编号失去焦点
    warehouseNoBlur() {
      if (this.warehouseNo != '') {
        for (const i of this.warehouseNoList) {
          if (this.warehouseNo == i.value) {
            this.warehouseName = i.label
            return
          }
        }
        this.$message({
          type: 'warning',
          offset: 400,
          message: '无此仓库编号'
        })
        this.warehouseNo = ''
        this.warehouseName = ''
      } else {
        this.warehouseName = ''
      }
    },
    // 点击补单按钮触发的函数
    showSporder() {
      if (this.details == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选择左表数据进行补单'
        })
        return
      }
      // for(let o of this.allData1){
      //   if(this.sequence == o.sequence && o.affirm == 1){
      //     this.$message({
      //       type: 'warning',
      //       offset:400,
      //       message: '此单已确认，不可进行改单和补单操作'
      //     });
      //     return
      //   }
      // }
      this.SpOrder = 'block'
      this.tableData2 = this.tableData1
    },
    closeSporder() {
      this.SpOrder = 'none'
    },
    //当子组件点击保存的时候，监听子组件传过来的方法，并且拿到子组件要传给后端的参数对象
    saveSporder(data) {
      console.log(data, '点击保存的时候，son传过来的参数')
      this.SpOrder = 'none'
      postNewbuild(data).then((res) => {
        console.log(res.data, 'postNewbuild')
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            offset: 400,
            message: '补单保存成功'
          })
          this.query()
        } else {
          this.$message.error({
            offset: 400,
            message: '补单保存失败'
          })
        }
      })
    },

    pwd() {
      if (this.details == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选择左表数据进行改单'
        })
        return
      }
      // for(let o of this.allData1){
      //   if(this.sequence == o.sequence && o.affirm == 1){
      //     this.$message({
      //       type: 'warning',
      //       offset:400,
      //       message: '此单已确认，不可进行改单和补单操作'
      //     });
      //     return
      //   }
      // }
      this.showpwd = 'block'
    },
    closepwd() {
      this.showpwd = 'none'
    },
    showRevision() {
      this.showpwd = 'none'
      this.ChangeOd = 'block'
    },
    closeChange() {
      this.ChangeOd = 'none'
    }
  },
  watch: {
    kindsNumber(a, b) {
      if (a) {
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    searchSequence(a, b) {
      if (a) {
        this.searchSequence = a.toUpperCase().trim()
      }
    },
    receiptsNumber(a, b) {
      if (a) {
        this.receiptsNumber = a.toUpperCase().trim()
      }
    }
  }
}
</script>

<style scoped>
.WarehouseDifQ {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.wdq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.wdq-top div {
  display: flex;
}
.wdq-top div p:first-child {
  margin: 3px 6px 0 0;
  display: inline-block;
  white-space: nowrap;
}
.wdq-top div p:not(:first-child) {
  margin: 3px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.wd {
  width: 160px;
}
.wdq-btn {
  padding: 15px 0;
  /* 下面两句的flex是新增的 */
  display: flex;
  justify-content: space-between;
}
.wdq-tab {
  display: flex;
}
.wdq-tab > div:first-child {
  width: 28%;
  padding-right: 1%;
  text-align: end;
}
.wdq-tab > div:nth-child(2) {
  width: 72%;
  padding-left: 1%;
  border-left: 2px solid #f4f4f4;
  text-align: end;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
.print {
  top: 14%;
  left: 16%;
}
</style>

<style>
.WarehouseDifQ .wdq-top .el-input__inner {
  height: 30px;
}
.WarehouseDifQ .wdq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.WarehouseDifQ .wdq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}
.WarehouseDifQ .wdq-top .el-date-editor .el-range__close-icon {
  line-height: 23px;
}
.WarehouseDifQ .wdq-top .el-input__icon {
  line-height: 30px;
}
.WarehouseDifQ .wdq-tab .el-pagination .el-select .el-input .el-input__inner {
  width: 100px;
  height: 30px;
}
.WarehouseDifQ .wdq-tab .el-pagination--small .el-pagination__editor,
.el-pagination--small .el-pagination__editor.el-input .el-input__inner {
  width: 50px;
  height: 30px;
  margin-right: 5px;
}
.WarehouseDifQ
  .wdq-tab
  .el-pagination.is-background.el-pagination--small
  .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li {
  height: 30px;
  width: 30px;
}
.WarehouseDifQ .wdq-tab .el-pagination--small button,
.el-pagination--small span:not([class*='suffix']) {
  margin-right: 10px;
}
/* 
  这个是表格里面状态下的小红点 / 小绿点
*/
.tip1 {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 1px 0 4px;
}
</style>
